<template>
    <div class="shopcar-contations">
        <!-- 商品区域 -->
        <div class="goodslists">
            <div class="mui-card">
                <div class="mui-card-content" v-for="(item, index) in goodsList" :key="item.id" >
                    <!-- 开关 -->
                    <div class="mui-card-content-inner">
                        <div :class="['mui-switch', 'mui-switch-blue', 'mui-switch-mini', {'mui-active':item.selected}]" @click="touchSwitch(item.id)">
                            <div class="mui-switch-handle"></div>
                        </div>
                    </div>
                    <!-- 图片 -->
                    <img :src="item.img_url">
                    <div class="info">
                        <h3>{{item.title}}</h3>
                        <p>
                            <span class="price">￥{{item.price}}</span>
                            <numberbox :count="item.count" :max="item.kucun" :goodsid='item.id'></numberbox>
                            <a href="#" @click.prevent="remove(item.id, index)">删除</a>
                        </p>
                    </div>
                </div>
           </div>
        </div>
        <!-- 结算区域 -->
        <div class="mui-card sum">
            <div class="mui-card-header">总计（不含运费）</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <span>已选购商品<span class="color" >{{this.$store.getters.forEachCount.counts}}</span>，总价<span class="color">￥{{this.$store.getters.forEachCount.prices}}</span></span>
                        <mt-button type="danger" @click="showToast">结算</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mui from '../lib/mui-master/examples/hello-mui/js/mui.js'
import numberbox from '../subcomponents/shopCar_numberbox.vue'
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
            goodsList:[],
            sum:{}
        }
    },
    created(){ 
        this.getGoodsList();
    },
    mounted(){
        mui('.mui-switch')['switch']();
    },
    components:{
        numberbox
    },
    methods:{
        getGoodsList(){
            // 获取本地存储的商品数据
            var goodsinfo = JSON.parse(localStorage.getItem('GoodsList'));
            // 获取已添加到购物车的商品
            this.$store.state.car.forEach(item =>{
                goodsinfo.some(item1=>{
                    if(item1.id == item.id){
                        var info = {}
                        info.id = item.id;
                        info.selected = item.selected;
                        info.title = item1.title;
                        info.price = item.price;
                        info.count = item.count;
                        info.img_url = item1.img_url;
                        info.kucun = item1.stock_quantity;
                        this.goodsList.push(info);
                    }
                })
            });
        },
        remove(id, index){
            // 删除goodslist中的商品
            this.goodsList.splice(index,1);
            this.$store.commit('deleteGoodsInfo',id);

        },
        touchSwitch(id){
            this.$store.commit('touchSwitch',id);
        },
        showToast(){
            Toast({
                message: '不想卖东西，只是学习用而已噢！见谅',
                position: 'bottom',
                duration: 5000
            });
        }
    },
}
</script>

<style lang="scss">
.shopcar-contations{
    .goodslists{
    .mui-card{
        background-color: #eeeeee;
        h3{
            font-size: 13px;
            margin-left: 10px;
        }
        .mui-card-content{
            img{
                width: 60px;
                height: 60px;
                display: inline-block;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            .info{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .price{
                    color:red;
                    font-weight: bold;
                }
                p{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
            }
        }
    }
    }
    .sum{
        background-color: #dedede;
    }
    .mui-card-content-inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mui-card-header{
        font-size: 13px;
        color: #999;
    }
    .color{
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
}
</style>

